<template>
  <div id="app">
    <Vheader :seller="seller"></Vheader>
    <div class="tab-warpper">
      <!-- 传给子组件tabs -->
       <Tab :tabs="tabs"></Tab>
    </div>
   
  </div>
</template>

<script>
//这里配置了路径别名等于"./components/v-header/v-header.vue"
  import Vheader from 'components/v-header/v-header.vue';
  import goods from "components/goods/goods"
  import seller from "components/seller/seller"
  import ratings from "components/ratings/ratings"
  import Tab from "./components/tab/tab"
  import {getSeller} from "api/index.js"
  import qs from "query-string"
  export default {
    data() {
      return {
        seller:{id:qs.parse(location.search).id}
      };
    },
    computed:{
      tabs(){
        return [
          {
            label:"商品",
            component:goods,
            data:{
              seller:this.seller
            }
          },
          {
            label:"评价",
            component:ratings,
            data:{
              seller:this.seller
            }
          },
          {
            label:"商家",
            component:seller,
            data:{
              seller:this.seller
            }
          }
          
        ]
      }
    },
    created() {
      //获取数据
      this._getSeller()
    },
    methods:{
      _getSeller(){
         getSeller({id:this.seller.id}).then((seller)=>{
          this.seller=seller
        })
      }
    },
    components: {
      //注册组件
      Vheader,
      Tab
    }
  };
</script>

<style  lang="stylus" rel="stylesheet/stylus">
@import "./common/stylus/mixin.styl"
//利用position :fixed填满剩余空间
#app
 .tab-warpper
   position :fixed
   top:136px
   left :0
   right :0
   bottom :0


</style>
